<template>
  <div class="LockInformation">
    <div class="blueTitleStyle title">锁具信息</div>
    <div class="LockInformation-con">
      <div v-for="(item, index) in LockInformationType" :key="index" @click="LockInfEvent(item)">
        <div>
          <div class="myfirst"></div>
        </div>
        <div>
          <div>
            <span>{{item.name}}</span>
          </div>
          <div style="line-height:.3rem">
            设备数
            <span style="padding-left:.1rem">{{item.total}}</span>
          </div>
          <div>
            在线数
            <span style="padding-left:.1rem">{{item.online}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";
interface LockInformationType {
  name: string;
  total: string; //设备数量
  online: string; //设备在线数
  path?: string;
}

@Component
export default class LockInformation extends Vue {
  public LockInfEvent(item: LockInformationType): void {
    this.$router.push({ path: item.path });
  }
  get LockInformationType() {
    let getterAllAuxiliaryByXtId = GetSocketModule.getterAllAuxiliaryByXtId;
    let getterAllAuxiliaryBySbId = GetSocketModule.getterAllAuxiliaryBySbId;
    let zxdw = GetSocketModule.getterZxdw; 
    let znskData = getterAllAuxiliaryByXtId["07"] || [];
    let mjkzData = getterAllAuxiliaryBySbId["0201"] || [];
    let wfysxData = getterAllAuxiliaryByXtId["08"] || [];
    console.log('台账按设备划分:',GetSocketModule.getterAllAuxiliaryBySbId);
    console.log('台账按系统id划分:',GetSocketModule.getterAllAuxiliaryByXtId);
    console.log('智能锁控:',znskData);
    console.log('门禁控制:',mjkzData);
    console.log('五防钥匙箱:',wfysxData);
    // 将点位按照设备分类
    let getSbObj = (arr) => {
      let sbObj = {};
      arr.forEach((item) => {
        let key = item.stationId + "-" + item.deviceId;
        sbObj[key] = sbObj[key] || [];
        sbObj[key].push(item);
      });
      return sbObj;
    };
    // 判断设备是否在线
    let isOnline = (arr) => {
      let isOnline = true;
      arr.forEach((item) => {
        if (isOnline) {
          zxdw.forEach((v) => {
            if (item.dwValue === v) {
              if (item.value === "1") {
                isOnline = false;
              }
            }
          });
        }
      });
      return isOnline;
    };
    // 获取设备总数和在线数
    let getZsAndZxs = (obj) => {
      let ZsAndZxs = {
        zs: 0,
        zxs: 0,
      };
      for (let key in obj) {
        ZsAndZxs.zs++;
        let listArr = obj[key];
        let keyIsOnline = isOnline(listArr);
        if (keyIsOnline) {
          ZsAndZxs.zxs++;
        }
      }
      return ZsAndZxs;
    };
    let znskSb = getSbObj(znskData) || [];
    let znskObj = getZsAndZxs(znskSb);
    let mjkzSb = getSbObj(mjkzData) || [];
    let mjkzObj = getZsAndZxs(mjkzSb);
    let wfysxSb = getSbObj(wfysxData) || [];
    let wfysxObj = getZsAndZxs(wfysxSb);

    console.log('wfysxSb:',wfysxSb);

    console.log('wfysxObj:',wfysxObj);

    return [
      {
        name: "智能锁控",
        total: znskObj.zs,
        online: znskObj.zxs,
        path: "/locks/LockControlPage",
      },
      {
        name: "门禁控制",
        total: mjkzObj.zs,
        online: mjkzObj.zxs,
        path: "/locks/EntranceGuardPage",
      },
      {
        name: "五防钥匙箱",
        total: wfysxObj.zs,
        online: wfysxObj.zxs,
        path: "/locks/KeyBoxPage",
      },
      {
        name: "一钥通",
        total: "0",
        online: "0",
        path: "/locks/KeyLinksPage",
      },
    ];
  }
}
</script>

<style lang="scss" scoped>
.LockInformation {
  width: 100%;
  height: 100%;
  .title {
    height: 0.27rem;
    line-height: 0.27rem;
    font-size: 0.18rem;
    color: #fff;
    width: 100%;
    padding-left: 0.2rem;
  }
  &-con {
    width: 100%;
    height: calc(100% - 0.27rem);
    display: flex;
    justify-content: space-around;
    align-items: center;

    > div {
      cursor: pointer;

      > div {
        &:nth-child(1) {
          width: 1.41rem;
          height: 1.49rem;
          background-image: url("../../../../assets/img/HomePage/bor_sj.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          display: flex;
          justify-content: center;
          align-items: center;
          > div {
            width: 0.42rem;
            height: 0.63rem;
            background-image: url("../../../../assets/img/HomePage/icon/icon_znsk.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
          }
          &:nth-child(2) {
            display: flex;
            flex-direction: column;
          }
        }
        &:nth-child(2) {
          display: flex;
          flex-direction: column;
          align-items: center;
          span {
            font-family: "numfont";
            font-size: 0.18rem;
          }
          > div {
            &:nth-child(1) {
              font-size: 0.16rem;
              color: #c9e3fd;
            }
          }
        }
      }
    }
    > div:nth-child(1) > div:nth-child(1) > div {
      animation: myfirst;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-duration: 3s;
      animation-delay: 4s;
    }
    > div:nth-child(2) > div:nth-child(1) > div {
      animation: myfirst;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-duration: 3s;
      animation-delay: 5s;
      width: 0.66rem;
      height: 0.59rem;
      background-image: url("../../../../assets/img/HomePage/icon/icon_mjkz.png");
    }
    > div:nth-child(3) > div:nth-child(1) > div {
      animation: myfirst;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-duration: 3s;
      animation-delay: 6s;
      width: 0.7rem;
      height: 0.62rem;
      background-image: url("../../../../assets/img/HomePage/icon/icon_wfysx.png");
    }
    > div:nth-child(4) > div:nth-child(1) > div {
      animation: myfirst;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-duration: 3s;
      animation-delay: 5s;
      width: 0.66rem;
      height: 0.56rem;
      background-image: url("../../../../assets/img/HomePage/icon/icon_yyt.png");
    }
  }
}

@keyframes myfirst {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0, -9px);
  }
  50% {
    transform: translate(0, -18px);
  }
  75% {
    transform: translate(0, -9px);
  }
  100% {
    transform: translate(0, 0);
  }
}
</style>

